<template>
  <!-- <a-modal
    title="图片预览"
    :width="800"
    :visible="previewVisible"
    :footer="null"
    @cancel="handleCancel"
  >
    <viewer :images="imgs">
      <img style="max-width: 732px" v-for="src in imgs" :src="src.url" :key="src.title" />
    </viewer>
  </a-modal>-->
  <!-- <div class="content">
        <h1>图片预览</h1>

  </div>-->
  <viewer v-show="false" :images="images" @inited="inited" class="viewer" ref="viewer">
    <template slot-scope="scope">
      <img v-for="src in scope.images" :src="src" :key="src" />
    </template>
  </viewer>
</template>

<script>
export default {
  data() {
    return {
      images: []
    }
  },
  computed: {
    getViewer() {
      return document.body
    }
  },
  watch: {
    getViewer: {
      handler(n, o) {
        console.log('n', n)
      },
      deep: true
    }
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer
    },
    show(arr) {
      this.images = arr
      this.$viewer.show()
      setTimeout(() => {
        document.getElementsByTagName('body')[0].style.overflow = 'scroll'
      }, 500)
    }
    // handleCancel() {
    //   this.previewVisible = false
    // }
  }
}
</script>